<template>
  <div class="return-progress">
    <div class="tit">
      {{ $t('applyReturn.refundProgress') }}
    </div>
    <div
      v-if="closingSts"
      class="item"
    >
      <div class="time">
        {{ refundDetail.interventionFinishTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ closingSts }}
        </div>
        <div class="text">
          平台留言：{{ refundDetail.platformMessage }}
        </div>
      </div>
    </div>
    <!-- 用户撤销申请 -->
    <div
      v-if="refundDetail.applyInterventionTime&&platInterSts===-1"
      class="item"
    >
      <div class="time">
        {{ refundDetail.interventionFinishTime }}
      </div>
      <div class="name">
        用户撤销申请
      </div>
    </div>
    <!-- 平台介入中 -->
    <div
      v-for="(intervenItem,intervenInx) in refundInterList"
      :key="intervenInx"
      class="item"
    >
      <div class="time">
        {{ intervenItem.createTime }}
      </div>
      <div class="text-box">
        <div class="name">
          平台介入中
        </div>
        <div class="text">
          <!-- 0.普通用户 1.商家端 2.平台端 -->
          {{ ['买家','商家','平台'][intervenItem.sysType] }}补充凭证
        </div>
        <div
          v-if="intervenItem.voucherDesc"
          class="name"
        >
          凭证说明：
        </div>
        <div
          v-if="intervenItem.voucherDesc"
          class="text"
        >
          {{ intervenItem.voucherDesc }}
        </div>
        <div
          v-if="intervenItem.imgList.length"
          class="img-box"
        >
          <el-image
            v-for="(interImg, interInx) in intervenItem.imgList"
            :key="interInx"
            :src="interImg"
            :initial-index="initialIndex"
            class="longimage"
            :preview-src-list="intervenItem.imgList"
            @click="initialIndex=interInx"
          >
            <template #error>
              <img
                class="longimage"
                src="@/assets/img/def.png"
                alt
              >
            </template>
          </el-image>
        </div>
      </div>
    </div>
    <!-- 用户申请平台介入 -->
    <div
      v-if="refundDetail.applyInterventionTime"
      class="item"
    >
      <div class="time">
        {{ refundDetail.applyInterventionTime }}
      </div>
      <div class="text-box">
        <div class="name">
          申请平台介入
        </div>
        <div class="text">
          买家申请平台客服介入
        </div>
        <div class="name">
          申请理由：
        </div>
        <div class="text">
          {{ refundDetail.applyInterventionReason }}
        </div>
        <div
          v-if="applyInterventionImgs.length"
          class="img-box"
        >
          <el-image
            v-for="(img, applyInterInx) in applyInterventionImgs"
            :key="applyInterInx"
            :src="img"
            class="longimage"
            :initial-index="initialIndex"
            :preview-src-list="applyInterventionImgs"
            @click="initialIndex=applyInterInx"
          >
            <template #error>
              <img
                class="longimage"
                src="@/assets/img/def.png"
                alt
              >
            </template>
          </el-image>
        </div>
      </div>
    </div>
    <!-- 申请关闭 -->
    <div
      v-if="(refundDetail.returnMoneySts === -1 || platInterSts!==-1 ) && refundDetail.handelTime && !refundDetail.rejectTime"
      class="item"
    >
      <div class="time">
        {{ refundDetail.updateTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ $t('applyReturn.applicationClosed') }}
        </div>
      </div>
    </div>
    <!-- 买家撤销 -->
    <div
      v-if="(refundDetail.returnMoneySts === -1 || platInterSts!==-1 ) && refundDetail.cancelTime"
      class="item"
    >
      <div class="time">
        {{ refundDetail.cancelTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ nickName }}
        </div>
        <div class="text">
          {{ $t('applyReturn.refundReason14') }}
        </div>
      </div>
    </div>
    <!-- 商家拒绝 -->
    <div
      v-if="(refundDetail.returnMoneySts === -1 || platInterSts!==-1 ) && refundDetail.rejectTime"
      class="item"
    >
      <div class="time">
        {{ refundDetail.rejectTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ refundDetail.shopName }}
        </div>
        <div class="text">
          <p>{{ $t('applyReturn.refundReason15') }}</p>
          <p v-if="refundDetail.rejectMessage">
            {{ $t('applyReturn.reasonsRejection') }}："{{ refundDetail.rejectMessage }}"
          </p>
          <p v-if="refundDetail.sellerMsg">
            {{ $t('applyReturn.sellerRemarks') }}："{{ refundDetail.sellerMsg }}"
          </p>
          <p>{{ $t('applyReturn.refundReason16') }}</p>
          <p
            v-if="rejectImgs.length"
            class="ref-voucher"
          >
            拒绝凭证：
            <el-image
              v-for="(img, rejectInx) in rejectImgs"
              :key="rejectInx"
              :src="img"
              class="ref-img"
              fit="contain"
              :initial-index="initialIndex"
              :preview-src-list="rejectImgs"
              @click="initialIndex=rejectInx"
            >
              <template #error>
                <img
                  class="ref-img"
                  src="@/assets/img/def.png"
                  alt
                >
              </template>
            </el-image>
          </p>
        </div>
      </div>
    </div>
    <!-- 退款成功 -->
    <div
      v-if="refundDetail.refundTime && !refundDetail.rejectTime"
      class="item"
    >
      <div class="time">
        {{ refundDetail.refundTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ refundDetail.shopName }}
        </div>
        <div class="text">
          {{ $t('applyReturn.refundReason17') }}
        </div>
        <p v-if="refundDetail.sellerMsg">
          {{ $t('applyReturn.sellerRemarks') }}："{{ refundDetail.sellerMsg }}"
        </p>
      </div>
    </div>
    <!-- 卖家收到寄回货物 -->
    <div
      v-if="refundDetail.applyType === 2 && refundDetail.receiveTime"
      class="item"
    >
      <div class="time">
        {{ refundDetail.receiveTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ refundDetail.shopName }}
        </div>
        <div class="text">
          {{ $t('applyReturn.refundReason18') }}
        </div>
        <p v-if="refundDetail.sellerMsg">
          {{ $t('applyReturn.sellerRemarks') }}："{{ refundDetail.sellerMsg }}"
        </p>
      </div>
    </div>
    <!-- 买家寄出 -->
    <div
      v-if="refundDetail.applyType === 2 && refundDetail.shipTime"
      class="item"
    >
      <div class="time">
        {{ refundDetail.shipTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ nickName }}
        </div>
        <div class="text">
          {{ $t('applyReturn.refundReason19') }}
          <span class="distance">{{ $t('applyReturn.logisticsCompany') }}：{{ refundDetail.refundDelivery.deyName }}</span>
          <span class="distance">{{ $t('applyReturn.shipmentNumber') }}：{{ refundDetail.refundDelivery.deyNu }}</span>
        </div>
      </div>
    </div>
    <!-- 卖家同意，给出地址 -->
    <div
      v-if="refundDetail.applyType === 2 && refundDetail.handelTime && (!refundDetail.rejectTime || refundDetail.refundDelivery?.refundDeliveryId)"
      class="item"
    >
      <div class="time">
        {{ refundDetail.handelTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ refundDetail.shopName }}
        </div>
        <div class="text">
          <p>{{ $t('applyReturn.refundReason20') }}</p>
          <p>{{ $t('applyReturn.refundAddress') }}：{{ refundDetail.refundDelivery.receiverName }}&nbsp;&nbsp;{{ refundDetail.refundDelivery.receiverMobile }}&nbsp;&nbsp;{{ refundDetail.refundDelivery.receiverAddr }}</p>
          <p v-if="refundDetail.sellerMsg">
            {{ $t('applyReturn.sellerRemarks') }}："{{ refundDetail.sellerMsg }}"
          </p>
        </div>
      </div>
    </div>
    <!-- 卖家同意 -->
    <div
      v-if="refundDetail.applyType === 1 && refundDetail.decisionTime && !refundDetail.rejectTime"
      class="item"
    >
      <div class="time">
        {{ refundDetail.decisionTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ refundDetail.shopName }}
        </div>
        <div class="text">
          <p>{{ $t('applyReturn.refundReason20') }}</p>
          <p v-if="refundDetail.sellerMsg">
            {{ $t('applyReturn.sellerRemarks') }}："{{ refundDetail.sellerMsg }}"
          </p>
        </div>
      </div>
    </div>
    <!-- 买家申请 -->
    <div class="item">
      <div class="time">
        {{ refundDetail.applyTime }}
      </div>
      <div class="text-box">
        <div class="name">
          {{ nickName }}
        </div>
        <div class="text">
          <p>
            <span class="distance ft">{{ $t('applyReturn.buyerRequestRefund') }}</span><el-divider direction="vertical" />
            <span class="distance">{{ $t('applyReturn.refundType') }}：
              {{ ['',$t('applyReturn.refundsOnly'),$t('applyReturn.returnsAndRefunds')][refundDetail.applyType] }}
            </span><el-divider direction="vertical" />
            <span class="distance">
              {{ $t('applyReturn.refundAmount') }}：
              <i v-if="refundDetail.refundAmount">￥{{ Number(refundDetail.refundAmount).toFixed(2) }}</i>
              <i v-if="refundDetail.refundAmount && refundDetail.refundScore">&nbsp;+&nbsp;</i>
              <i v-if="refundDetail.refundScore">{{ refundDetail.refundScore }}{{ $t('applyReturn.points') }}</i>
            </span><el-divider direction="vertical" />
            <span class="distance">{{ $t('applyReturn.refundReason') }}：{{ refundReasonArray[refundDetail.buyerReason] }}</span>
          </p>
          <p v-if="refundDetail.buyerDesc">
            {{ $t('applyReturn.refundDescription') }}："{{ refundDetail.buyerDesc }}"
          </p>
          <p
            v-if="photoFiles.length"
            class="ref-voucher"
          >
            {{ $t('applyReturn.refundVoucher') }}：
            <el-image
              v-for="(pic, picIndex) in photoFiles"
              :key="pic"
              class="ref-img"
              fit="contain"
              :src="pic"
              :initial-index="picIndex"
              :preview-src-list="photoFiles"
            >
              <template #error>
                <img
                  class="ref-img"
                  src="@/assets/img/def.png"
                  alt
                >
              </template>
            </el-image>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  refundDetail: {
    type: Object,
    default: () => ({})
  }
})

const initialIndex = ref(0) // 预览图片索引

// 用户昵称
const nickName = ref(useUserStore().nickName)
// 退款原因（总）
const refundReasonArray = computed(() => {
  return [
    $t('applyReturn.refundReason1'),
    $t('applyReturn.refundReason2'),
    $t('applyReturn.refundReason3'),
    $t('applyReturn.refundReason4'),
    $t('applyReturn.refundReason5'),
    $t('applyReturn.refundReason6'),
    $t('applyReturn.refundReason7'),
    '',
    $t('applyReturn.refundReason8')
  ]
})

// 平台介入状态 -1.没有介入 1.用户申请介入 2.平台同意介入 3.平台拒绝介入 5.平台同意退款成功 6.用户撤销
const platInterSts = computed(() => props.refundDetail.platformInterventionStatus)

// 交易结束状态
const closingSts = computed(() => {
  switch (platInterSts.value) {
    case 3:
      return '平台拒绝退款'
    case 5:
      return '平台同意退款成功'
    default:
      return ''
  }
})

// 平台介入中补充凭证列表
const refundInterList = computed(() => {
  const list = props.refundDetail.orderRefundInterventionList || []
  return list.reverse().map(item => {
    item.imgList = onHandleImgs(item.imgUrls)
    return item
  })
})

// 申请平台介入凭证
const applyInterventionImgs = computed(() => {
  return onHandleImgs(props.refundDetail.applyInterventionImgUrls)
})

// 拒绝凭证
const rejectImgs = computed(() => {
  return onHandleImgs(props.refundDetail.shopImgUrls)
})

// 用户申请凭证
const photoFiles = computed(() => {
  return onHandleImgs(props.refundDetail.photoFiles)
})

// 图片处理
const onHandleImgs = (imgStr) => {
  if (imgStr) {
    return imgStr.split(',').map(url => {
      return checkFileUrl(url)
    })
  }
  return []
}

</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
